<template>
  <div class="wd-page-statistics">
    <div class="_title">
      {{ porps.title }}
      <div v-if="porps.isUpdate">
        <span class="_time">本次统计时间：{{ times }}</span>
        <el-link type="primary" @click="update">刷新数据</el-link>
      </div>
    </div>
    <div class="_data">
      <el-row :span="24" :gutter="16">
        <el-col
          :xs="12"
          :sm="8"
          :md="6"
          :lg="6"
          :xl="4"
          v-for="(item, index) in porps.data"
          :key="index"
        >
          <div class="_list">
            <span class="_lable">{{ item.label }}</span>
            <div class="_value">{{ item.value }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, defineEmits } from "vue";
const porps = defineProps({
  title: {
    type: String,
    default: "数据概览",
  },
  data: {
    type: Array,
    default: () => [],
  },
  isUpdate: {
    type: Boolean,
    default: true,
  },
});

const times = ref();
const getTimes = () => {
  times.value = new Date().toISOString().replace(/T/, " ").replace(/\..+/, "");
};

const update = () => {
  //emit出去
  emit("update");
};

watch(
  () => porps.data,
  () => {
    getTimes();
  },
  { deep: true, immediate: true }
);
//注册emit
const emit = defineEmits(["update"]);
</script>
<style scoped lang="less">
.wd-page-statistics {
  margin-bottom: 1rem;
  border-bottom: 1px solid #f1f1f1;
  ._title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    height: 32px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    ._time {
      font-size: 12px;
      color: #999;
      font-weight: normal;
      margin-left: 16px;
      margin-right: 10px;
    }
    :deep(.el-link .el-link__inner) {
      font-size: 12px;
    }
  }
  ._list {
    background-color: rgb(248, 248, 249);
    padding: 16px;
    border-radius: 8px;
    color: #323335;
    font-weight: 700;
    margin-bottom: 16px;
    ._lable {
      font-size: 12px;
      line-height: 20px;
      border-image-slice: 1;
      border-image-source: repeating-linear-gradient(
        90deg,
        #969aa0,
        #969aa0 3px,
        transparent 0,
        transparent 5px
      );
      border-width: 0 0 1px;
      border-bottom-style: solid;
      border-bottom: 1px solid;
      border-image-outset: 0;
    }
    ._value {
      margin-top: 10px;
      font-size: 18px;
      line-height: 20px;
    }
  }
}
</style>
